<template>
	<p
		class="mc-group-title"
		:style="{ 'text-align': contentPosition }"
	>
		<span>{{content}}</span> <slot name="title-icon"/>
		<span
			v-if="tipLabel && content"
			slot="label"
		>
			<Tooltip
				placement="top"
				:content="tipLabel"
			>
				<a class="el-icon-question tooltip-question"/>
			</Tooltip>
		</span>
	</p>
</template>
<script>
import {Tooltip} from 'element-ui';
export default {
	name:'McGroupTitle',
	components:{
		Tooltip,
	},
	props:{
		tipLabel:{
			type:String,
			default:'',
		},
		content:{
			type:String,
			default:'',
		},
		'content-position':{
			type:String,
			default:'left',
		},
	},
};
</script>
<style lang="scss" scoped>
.mc-group-title {
    border-bottom: 1px solid #ebeef5;
    color: #606266;
    font-size: 16px;
    line-height: 50px;
    font-weight: 600;
    .tooltip-question {
        color: #a0acb7 !important;
        opacity: 0.8;
    }
}
</style>